<script setup>
import { ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { postUserCollectAPI, deleteUserCollectAPI } from "@/api/user";
// 定义 props 接收数据
const props = defineProps({
  house: {
    type: Object,
    required: true,
  },
});
// 是否收藏
const isCollect = ref(false);
// 房屋id
const houseId = ref();
// 切换图片
const toggleImage = async () => {
  if (!isCollect.value) {
    await postUserCollectAPI(houseId.value);
  } else {
    await deleteUserCollectAPI(houseId.value);
  }
  isCollect.value = !isCollect.value;
};

//监听传过来的数据
// 如果想要在script使用传输的数据，必须先监听，因为子组件钩子函数执行更快，父组件还未拿到数据子组件就更新。
watch(() => {
  //console.log("传递过来的数据", props.house);
  isCollect.value = props.house.isCollect;
  houseId.value = props.house.id;
});
</script>

<template>
  <view class="page-container">
    <!-- 顶部栏 -->
    <view class="top-bar">
      <image :src="house.image" mode="scaleToFill" />
      <view class="image-collect">
        <image
          :src="
            isCollect
              ? '/static/images/collection2.png'
              : '/static/images/collection1.png'
          "
          @click="toggleImage"
          mode="scaleToFill"
        />
      </view>
      <view class="house-info">
        <view>整租- {{ house.name }}</view>
        <view>{{ house.price }}元/月</view>
        <view>{{ house.size }}-{{ house.feature }}</view>
        <view class="house-address">
          <uni-icons type="location" :size="18" color="black" />
          <text>{{ house.address }}-{{ house.name }}</text>
        </view>
      </view>
      <view class="house-tags">
        <view class="box">
          <text>朝向-西南</text>
        </view>
        <view class="box">
          <text>提供暖气</text>
        </view>
        <view class="box">
          <text>电梯房</text>
        </view>
      </view>
      <view class="house-desc">
        <view class="house-title">
          <text>房屋简介</text>
        </view>
        <view class="image-container">
          <view class="image-with-caption">
            <image src="/static/images/computer.png" mode="scaleToFill" />
            <text>电脑</text>
          </view>
          <view class="image-with-caption">
            <image src="/static/images/bed.png" mode="scaleToFill" />
            <text>床</text>
          </view>
          <view class="image-with-caption">
            <image src="/static/images/cabinet.png" mode="scaleToFill" />
            <text>衣柜</text>
          </view>
          <view class="image-with-caption">
            <image src="/static/images/wifi.png" mode="scaleToFill" />
            <text>WIFI</text>
          </view>
          <view class="image-with-caption">
            <image src="/static/images/more.png" mode="scaleToFill" />
            <text>更多</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page-container {
  width: 100%;
  height: 100%; /* 使用视口高度 */
  background-color: white;
}

.top-bar {
  height: 1000rpx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;

  image {
    width: 100%;
    height: 350rpx;
  }

  .image-collect {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    z-index: 10;

    image {
      width: 70rpx;
      height: 70rpx;
    }
  }

  .house-info {
    display: flex;
    flex-direction: column;
    height: 200rpx;
    margin-left: 20rpx;
    view {
      padding: 6rpx 0rpx;
      &:nth-child(1) {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
      }
      &:nth-child(2) {
        font-size: 32rpx;
        color: #ff9900;
      }
      &:nth-child(3) {
        font-size: 32rpx;
        color: #666;
      }
    }
  }
  .house-address {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #666;
    position: relative;
    right: 4rpx;
  }
  .house-tags {
    height: 200rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 25rpx;
    border-bottom: 4rpx solid #e6ebed;
    .box {
      height: 100rpx;
      width: 200rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2rpx solid #ff9900;
      box-shadow: 0 0 10rpx 5rpx rgba(255, 153, 0, 0.5); /* 添加外阴影 */
      text {
        font-size: 30rpx;
      }
    }
  }
  .house-desc {
    height: 200rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-bottom: 4rpx solid #e6ebed;
    padding: 10rpx 0rpx;
  }
  .house-title {
    margin-top: 10rpx;
    margin-left: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
  .image-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-top: 20rpx;
  }
  .image-with-caption {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center;
    image {
      width: 70rpx;
      height: 70rpx;
      margin-bottom: 5rpx; /* 图片与文本之间的间距 */
    }
    text {
      font-size: 28rpx;
      color: #666;
    }
  }
}
</style>
